<template>
  <view
    @tap="handleTap"
    :style="{
      backgroundColor: backgroundColor,
      color: color,
      fontSize: fontSize,
      border: border,
    }"
    class="zk_btn"
    :class="[delBtn ? 'del' : '', disabled ? 'disabled' : '']">
    <uni-icons
      v-if="iconType"
      :type="iconType"
      :color="iconColor"
      :size="iconSize" />
    <view class="text">
      <slot></slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
const props = defineProps({
  iconType: { type: String, default: "" },
  iconColor: { type: String, default: "#fff" },
  iconSize: { type: String, default: "20" },
  backgroundColor: { type: String, default: "#2C8A66" },
  color: { type: String, default: "#fff" },
  fontSize: { type: String, default: "14px" },
  border: { type: String, default: "" },
  delBtn: { type: Boolean, default: false },
  time: { type: Number, default: 500 },
  disabled: { type: Boolean, default: false },
});
const emit = defineEmits(["handleTap"]);
let timer: any = null;
const active: any = ref(false);
const handleTap = () => {
  if (props.disabled) return;
  if (active.value) {
    timer = null;
    return;
  } else {
    emit("handleTap");
    active.value = true;
    timer = setTimeout(() => {
      active.value = null;
    }, props.time);
  }
};
</script>

<style lang="scss" scoped>
.zk_btn {
  width: fit-content;
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 40px;
  line-height: 4%;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  &.del {
    background: #fff !important;
    border: 1px solid #e4e4e4 !important;
    color: #08121e !important;
  }
  &.disabled {
    background: #ccc !important;
    color: #999 !important;
    cursor: not-allowed;
  }
  .text {
    margin: 0 5px;
  }
}
</style>
